<template>
  <a-row class="login_box" v-title data-title="后羿零碳-登录">
    <a-col :span="24" class="left_row">
      <div class="register_from_container">
        <div class="login_header">
          <img src="@/assets/img/dc3.png" alt="" />
          <h2>ESG-企业版-注册</h2>
        </div>
        <div class="register_from_box">
          <a-steps :current="current" class="steps_box" size="small">
            <a-step
              v-for="item in steps"
              :key="item.title"
              :title="item.title"
            />
          </a-steps>

          <register-account
            ref="account"
            v-if="current == 0"
          ></register-account>
          <register-company
            ref="company"
            v-if="current == 1"
          ></register-company>
          <register-review v-if="current == 2"></register-review>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { getAction, postAction } from "@/api/manage";
import { timeFix } from "@/utils/util";
import { duplicateCheck } from "@/api/api";
import Vue from "vue";
import { mapActions } from "vuex";
import bus from "@/bus";
import registerAccount from "./registerAccount.vue";
import registerCompany from "./registerCompany.vue";
import registerReview from "./registerReview.vue";
export default {
  name: "Login",
  data() {
    return {
      registerData: {},
      requestCodeSuccess: false,
      randCodeImage: "",
      currdatetime: "",
      rememberMe: false,
      current: 0,
      steps: [
        {
          title: "账号信息设置",
        },
        {
          title: "公司资质信息",
        },
        {
          title: "等待审核",
        },
      ],
    };
  },

  mounted() {
    bus.$on("next", (model) => {
        //   console.log(model,222)
      this.current++;
      this.registerData = Object.assign(this.registerData, model);
      //   console.log( this.registerData)
    });
    bus.$on("saveRegisterData", (model) => {
      this.registerData = Object.assign(this.registerData, model);
            //   console.log( this.registerData)
      if (this.current == 1) {
        postAction("/sys/regist/company", this.registerData).then((res) => {
            if(res.code== 200){
                this.current++;
            }else{
                
            }
        });
      }
    });
  },
  created() {
    this.handleChangeCheckCode();
  },
  components: {
    registerCompany,
    registerAccount,
    registerReview,
  },
  methods: {
    ...mapActions(["Login"]),
    // 登录事件
    handleSubmit(e) {
      //   this.handleLogin();
      this.$refs["form"].validate((success) => {
        if (success) {
          let register = this.model;
          //   console.log(register);
          postAction("/sys/regist/account", register).then((res) => {
            //   console.log(res);
            if (!res.success) {
              this.registerFailed(res.message);
            } else {
              this.$router.push({
                name: "registerResult",
                params: { ...values },
              });
            }
          });
        }
      });
    },
    handleRememberMeChange(e) {
      this.rememberMe = e.target.checked;
    },
    handleLogin(rememberMe) {
      this.validateFields(["username", "password", "inputCode"], (err) => {
        if (!err) {
          //   console.log("登录参数", loginParams);
          this.Login(loginParams)
            .then((loginResult) => {
              this.$refs.loginSelect.show(loginResult.result);
              //   console.log("success", loginResult.result);
            })
            .catch((err) => {
              if (err && err.code === 412) {
                //   登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
                this.handleChangeCheckCode();
                //   console.log("fail", err);
              }
              this.requestFailed(err);
            });
        }
      });
    },
    // 登录失败
    requestFailed(err) {
      let description =
        ((err.response || {}).data || {}).message ||
        err.message ||
        "请求出现错误，请稍后再试";
      //   console.log(this.$notification);

      this.$notification["error"]({
        message: "登录失败",
        description: description,
        duration: 4,
      });
    },
    // 刷新验证码
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime();
      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then((res) => {
          if (res.success) {
            this.randCodeImage = res.result;
            this.requestCodeSuccess = true;
          } else {
            this.$message.error(res.message);
            this.requestCodeSuccess = false;
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false;
        });
    },
    loginSelectOk() {
      this.loginSuccess();
    },
    //登录成功
    loginSuccess() {
      // 如果没有部门的话 直接登录成功
      this.$router.push({ path: "/" }).catch(() => {
        //   console.log("登录跳转首页出错,这个错误从哪里来的");
      });
      this.$notification.success({
        message: "欢迎",
        description: `${timeFix()}，欢迎回来`,
      });
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = [];
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs["form"].validateField(item, (err) => {
            if (!err) {
              resolve();
            } else {
              reject(err);
            }
          });
        });
        promiseArray.push(p);
      }
      Promise.all(promiseArray)
        .then(() => {
          callback();
        })
        .catch((err) => {
          callback(err);
        });
    },
  },
};
</script>

<style lang="scss" >
#components-form-demo-normal-login .login-form {
  //   max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  height: 38px !important;
  font-size: 16px !important;
  width: 100%;
  background: #0176d3 !important;
  color: #fff !important;
  box-shadow: 2px 2px 8px #ccc;
}
.login_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 100%;
  .ant-form-explain {
    text-align: left !important;
    width: 100%;
    height: 100%;
  }
  .left_row {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #f4f6f9;

    .register_from_container {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .login_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        img {
          width: 60px;
          height: 60px;
        }
        h2 {
          font-weight: 600;
          font-size: 32px;
          padding-top: 6px;
          margin-left: 10px;
        }
      }
      .register_from_box {
        max-width: 900px;
        min-width: 600px;
        background: #fff;
      }
      .register_from_box {
        // width: 420px;
        background: #fff;
        padding: 60px 100px;
        border-radius: 5px;
        box-shadow: 2px 2px 7px rgb(212, 212, 212);
        border: 1px solid #f1f0f0;
        .code {
          height: 40px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;
          &:hover {
            opacity: 0.8;
            transition: 0.2s;
          }
        }
        .code_click {
          background: #ccc;
          color: #999;
          cursor: not-allowed;
        }
        .code_normal {
          background: #e6f0fd;
          color: #0c67ee;
        }
        .steps_box {
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>